<template>
	<view class="page">
		<nav-header title="邀请加入" custom-nav>
		</nav-header>
		<view class="body">
			<view class="panel">
				<view class="info">查找方式</view>
				<view class="container-head">
					<view class="item">
						<view class="label">用户名:</view>
						<up-input class="input" v-model="queryData.phone" placeholder="请输入用户名"
							@input="handleInput('phone', $event)">
						</up-input>
						<view class="btn">
							<up-button class="btn" @tap="handleQuery('phone')" text="查询"></up-button>
						</view>
					</view>
					<view class="item">
						<view class="label">好友号:</view>
						<up-input class="input" v-model="queryData.userFriendId" placeholder="请输入好友号"
							@input="handleInput('userFriendId', $event)"></up-input>
						<view class="btn">
							<up-button class="btn" @click="handleQuery('userFriendId')">查询</up-button>
						</view>
					</view>
					<view class="item">
						<view class="label">商友号:</view>
						<up-input class="input" v-model="queryData.userBusinessId" placeholder="请输入商友号"
							@input="handleInput('userBusinessId', $event)"></up-input>
						<view class="btn">
							<up-button class="btn" @click="handleQuery('userBusinessId')">查询</up-button>
						</view>
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="info">搜索结果</view>
				<view class="agree-apply-head" v-if="formData.headImage || formData.nickName">
					<head-image :name="formData.nickName" :url="formData.headImage" :size="90"></head-image>
					<text>{{ formData.nickName }}</text>
				</view>
			</view>
			<view class="panel">
				<up-form labelPosition="top" :model="formData" :rules="rules" ref="form1">
					<view class="info">基本信息</view>
					<up-form-item label="姓名" prop="nickName" borderBottom>
						<up-input v-model="formData.nickName" placeholder="请输入姓名"></up-input>
					</up-form-item>
					<up-form-item label="部门" prop="structureId" borderBottom>
						<!-- <up-input @tap="showPicker" v-model="formData.structureName" placeholder="请输入部门"></up-input> -->
						<view @tap="showPicker" style="width: 100%;padding:5px;border: 1px solid #dadbde;height: 30px;">
							{{formData.structureName}}
						</view>
						<up-input style="display: none;" v-model="formData.structureId" placeholder="请输入部门"></up-input>
					</up-form-item>

					<up-form-item label="直属主管" prop="supervisor" labelWidth="180px">
						<up-input v-model="formData.supervisor" placeholder="请输入直属主管"></up-input>
					</up-form-item>

					<up-form-item label="职位" prop="postName" borderBottom>
						<up-input v-model="formData.postName" placeholder="请输入职位"></up-input>
					</up-form-item>

					<up-form-item label="入职时间" labelWidth="180px" prop="entryDate" borderBottom @click="show = true">
						<up-datetime-picker hasInput placeholder="请选择日期" :show="show" v-model="formData.entryDate"
							mode="date" @confirm="handleConfirm" @cancel="handleCancel"></up-datetime-picker>
					</up-form-item>

					<view class="info">个人信息</view>

					<up-form-item label="身份证姓名" prop="realName" borderBottom labelWidth="180px">
						<up-input v-model="formData.realName" placeholder="请输入身份证姓名"></up-input>
					</up-form-item>
					<up-form-item label="证件号码" prop="idCard" borderBottom labelWidth="180px">
						<up-input v-model="formData.idCard" placeholder="请输入证件号码"></up-input>
					</up-form-item>
					<up-form-item label="性别" prop="gender" borderBottom @click="showSex = true; hideKeyboard()">
						<radio-group class="uni-flex uni-row radio-group" @change="radioChange" style="flex-wrap: wrap">
							<radio id="trigger-change" value="0" :checked="formData.gender === '0'"
								style="margin-right: 15px" class="radio r">男</radio>
							<radio value="1" :checked="formData.gender === '1'" style="margin-right: 15px"
								class="radio r1">
								女</radio>
						</radio-group>
					</up-form-item>
					<up-button type="primary" @tap="submitForm">确认无误,同意申请</up-button>
				</up-form>
			</view>
		</view>
		<TreePicker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择部门"
			:localdata="structureData" valueKey="id" textKey="label" childrenKey="children" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		onShow,
		onHide,
		onLoad
	} from "@dcloudio/uni-app"
	import request from '@/common/request';
	import TreePicker from "@/components/TreePicker/TreePicker.vue"

	const queryData = reactive({
		phone: '',
		userBusinessId: '',
		userFriendId: ''
	});


	const handleInput = (field, value) => {
		queryData[field] = value;
	};

	// 2. 添加表单验证规则
	const rules = {
		nickName: {
			required: true,
			message: '请输入姓名'
		},
		structureId: {
			required: true,
			message: '请选择部门'
		},
		postName: {
			required: true,
			message: '请输入职位'
		},
		realName: {
			required: true,
			message: '请输入身份证姓名'
		},
		idCard: {
			required: false,
			pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
			message: '请输入正确的身份证号码'
		}
	}

	const formData = ref({
		companyId: '',
		userId: '',
		headImage: '',
		nickName: '',
		structureId: 0,
		supervisor: '',
		postName: '',
		entryDate: Date.now(),
		realName: '',
		idCard: '',
		birthDate: '',
		gender: '0',
		structureName: null,
		structureId: null
	});
	const userName = ref('')
	const form1 = ref(null)
	const structureData = ref([])
	const treePicker = ref()

	// 显示选择器
	const showPicker = () => {
		treePicker.value._show();
	}
	//监听选择（ids为数组）
	const selectChange = (ids, names) => {
		formData.value.structureName = names
		formData.value.structureId = ids[0]
	}

	const handleQuery = (field) => {
		console.log(field);
		// 处理所有参数的空字符串
		Object.keys(queryData).forEach(key => {
			if (queryData[key] === '') {
				queryData[key] = null
			}
		})

		if (!queryData[field]) {
			uni.showToast({
				title: `请输入${field === 'phone' ? '手机号' : field === 'userBusinessId' ? '商友号' : '好友号'}`,
				icon: 'none'
			})
			return
		}


		request({
			url: '/user/findByUser',
			data: queryData,
			method: 'POST'
		}).then(res => {
			// 3. 数据处理
			if (!res || !res.id) {
				uni.showToast({
					title: '未找到用户信息',
					icon: 'none'
				});
				return;
			}
			formData.value.nickName = res.nickName
			formData.value.headImage = res.headImage
			formData.value.userId = res.id
			formData.value.gender = res.gender
			userName.value = res.userName
		})
	}



	const show = ref(false);

	// 处理 radio 组变化的事件
	const radioChange = (event) => {
		formData.value.gender = event.detail.value;
	};

	const submitForm = () => {

		form1.value.validate().then(valid => {

			if (!valid) {
				return
			}
			console.log("formData",formData.value)
			request({
				url: `/company/staff`,
				data: formData.value,
				method: 'POST'
			}).then((res) => {
				uni.showToast({
					title: '邀请员工成功',
					icon: 'success',
					duration: 1000 // 设置显示时长为 3000 毫秒
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			})

		})

	};

	const handleConfirm = () => {
		show.value = false
	}
	const handleCancel = () => {
		show.value = false
	}

	// 使用 onShow 生命周期钩子
	onLoad((options) => {
		const companyId = options.companyId
		formData.value.companyId = companyId
		request({
			url: '/company/structure/tree?companyId=' + companyId,
			method: 'get'
		}).then(res => {
			structureData.value = res
		})
	});
</script>

<style scoped lang="scss">
	.page {
		.body {
			display: flex;
			flex-direction: column;
			gap: 20px;

			.panel {
				padding: 8px;
				background-color: $white;
			}
		}
	}

	.container-head {
		// gap: 10rpx;
		display: flex;
		flex-direction: column;
		gap: 20px;

		.item {
			display: flex;
			align-items: center;
			gap: 10px;

			.btn {
				width: 70px;
			}
		}
	}

	.agree-apply-head {
		height: 140rpx;
		width: 100%;
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.avatar-css {
		height: 100rpx;
		width: 100rpx;
		border-radius: 40px;

	}

	.info {
		font-size: 22rpx;
	}
</style>